<template>
	<div>
		<my-selector :options="options" v-on:selectorClick="receiveSelectorClick"></my-selector>
		<div id="movie"></div>	
	</div>
</template>

<script>
	import echarts from 'echarts'
	import apis from '../fetch/apis' 
	import * as types from '../store/types'
	import mySelector from './selector'
	import ecStat from 'echarts-stat'
	export default {
		data() {
			return {
				chart: null,
				options:[{
				      value: 0,
				      label: '票房数'
				    }, {
				    	// 反应票价与票房的关系
				      value: 1,
				      label: '票价——总票房'
				    }, {
				      value: 2,
				      label: '票房环比图'
				    }
				]
			}
		},
		components:{
			mySelector
		},
		methods: {
			drawChart (id, data){
				this.originalData = data;
				this.chart = echarts.init(document.getElementById(id));
				//处理data
				const yData = data.map(d => d.MovieName)
				const xData_today = data.map(d => d.BoxOffice)
				const xData_total = data.map(d => d.SumBoxOffice)
				var option = {
				    title: {
				        text: '当日票房',
				        subtext: '数据来自tushare'
				    },
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'shadow'
				        }
				    },
				    legend: {
				        data: ['当日票房', '总票房']
				    },
				    grid: {
				    	left: '3%',
				        right: '4%',
				        bottom: '10%',
				        top:'10%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'value',
				        boundaryGap: [0, 0.01]
				    },
				    yAxis: {
				        type: 'category',
				        data: yData	
			   	 	},
				    series: [
				        {
				            name: '当日票房',
				            type: 'bar',
				            data: xData_today,
				            markPoint : {
				                data : [
				                    {type : 'max', name: '最大值'},
				                    {type : 'min', name: '最小值'}
				                ]
				            },
				            markLine : {
				                data : [
				                    {type : 'average', name: '平均值'}
				                ]
				            }
				        },
				        {
				            name: '总票房',
				            type: 'bar',
				            data: xData_total,
				            markPoint : {
				                data : [
				                    {type : 'max', name: '最大值'},
				                    {type : 'min', name: '最小值'}
				                ]
				            },
				            markLine : {
				                data : [
				                    {type : 'average', name: '平均值'}
				                ]
				            }
				        }
				    ]
				};
				//保存起来option的一个别名备份以后用
				this.optionBackup = Object.assign({}, option)
	
				this.chart.setOption(option)

			},
			redrawChart(value) {
				const option = this.chart.getOption();
				//导致我卡在这儿，case判断的是number，而它是string
				console.log(typeof value) 
				console.log(value) 
				switch(value) {
					case 0:
						this.chart.setOption(this.optionBackup, true)
						break;
					case 1:
						//这是用来画回归线的，但是这个例子里不明显，所以不画了
						const data = this.originalData.map(d => [d.AvgPrice,d.SumBoxOffice])
						option.xAxis = {
					        type: 'value',
					        splitLine: {
					            lineStyle: {
					                type: 'dashed'
					            }
					        },
					    }
						option.yAxis = {
					        type: 'value',
					        min: 1.5,
					        splitLine: {
					            lineStyle: {
					                type: 'dashed'
					            }
					        },
					    }
					    option.title = {
					        text: '票价-总票房',
					        subtext: '数据来自tushare'
					    }

						option.legend = {}
						option.series = [
							{
						        name: 'scatter',
						        type: 'scatter',
						        label: {
						            emphasis: {
						                show: true,
						                position: 'left',
						                textStyle: {
						                    color: 'blue',
						                    fontSize: 16
						                }
						            }
						        },
						        symbolSize:20,
						        data: data
						    }
						]
						this.chart.clear()
						this.chart.setOption(option, true)
						break;
					case 2:
						const xData = this.originalData.map(d => d.MovieName)	
						const data_today = this.originalData.map(d => d.BoxOffice)
						const data_incre = this.originalData.map(d => d.BoxOffice_Up>=0?+d.BoxOffice_Up:0)
						const data_decre = this.originalData.map(d => d.BoxOffice_Up <0?-d.BoxOffice_Up:0)
						option.legend = {
							x:'right',
							data:[]
						}
						option.xAxis = [
					        {	
					            type: "category", 
					            splitLine: {
					                show: false
					            }, 
					            axisTick: {
					                show: false
					            }, 
					            splitArea: {
					                show: false
					            }, 
					            axisLabel: {
					                interval: 0, 
					                rotate: 15, 
					                show: true, 
					                splitNumber: 15, 
					                textStyle: {
					                    fontFamily: "微软雅黑", 
					                    fontSize: 12
					                },
					                margin:30
					            }, 
					            data: xData
					        }
					    ]
					    option.yAxis =  [
					        {
					            type: "value", 
					            splitLine: {
					                show: false
					            }, 
					            axisLine: {
					                show: true
					            }, 
					            axisTick: {
					                show: false
					            }, 
					            splitArea: {
					                show: false
					            }
					        }
					    ]
					    option.series = [
					    	{
					    		name: "昨日", 
					            type: "bar", 
					            stack: "总量", 
					            barMaxWidth: 50, 
					            barGap: "10%", 
					            itemStyle: {
					                normal: {
					                    barBorderRadius: 0, 
					                    color: "rgba(60,169,196,0.5)", 
					                    label: {
					                        show: true, 
					                        textStyle: {
					                            color: "rgba(0,0,0,1)"
					                        }, 
					                        position: "insideTop",
					                        formatter : function(p) {
						                                                return p.value > 0 ? (p.value ): '';
						                                            }
					                    }
					                }
					            },
					            data:data_today
					    	},
					    	{
					    		name: "票房同比增加", 
					            type: "bar", 
					            stack: "总量", 
					            barMaxWidth: 50, 
					            barGap: "10%", 
					            itemStyle: {
					                normal: {
					                    barBorderRadius: 0, 
					                    color: "rgba(193,35,43,1)", 
					                    label: {
					                        show: true,  
					                        position: "top",
					                        formatter : function(p) {
						                                                return p.value > 0 ? ('▲'+p.value+'' ): '';
						                                            }
					                    }
					                }
					            },
					            data:data_incre
					    	},
					    	{
					    		name: "票房同比减少", 
					            type: "bar", 
					            stack: "总量", 
					            barMaxWidth: 50, 
					            barGap: "10%", 
					            itemStyle: {
					                normal: {
					                    barBorderRadius: 0, 
					                    color: "rgba(51,204,112,1)", 
					                    label: {
					                        show: true,  
					                        position: "top",
					                        formatter : function(p) {
						                                                return p.value > 0 ? ('▼'+p.value+'' ): '';
						                                            }
					                    }
					                }
					            },
					            data:data_decre
					    	},

					    ]
					    this.chart.clear()
					    this.chart.setOption(option, true)
						break;
					default:
						console.log("错误")
				}
			},
			receiveSelectorClick(value) {
				this.redrawChart(+value)
			}
			
		},
		
		mounted() {
			//this是vm实例 
			//$XXX是vm实例自带的方法
			//这个movie对象，最终会整合到vm实例里，所以可以用this.draw()方法
			apis.get_movie_day()
				.then(res =>{
					console.log(res)
					if (res.status == 200) {
						console.log("SUCCESS")
						this.drawChart("movie",res.data)
					}
				})
				.catch(error => {
					console.log(error)

				})
			
		}
	}
</script>

<style scoped>
	#movie {
		position: relative;
	    height: 560px;
	    width: 70%;
	    margin-left: 5%;
	    margin-top: 0;
	    border: solid #4682B4 1px;
	    box-shadow: 0 0 8px #87CEFA;
	    border-radius: 10px;
	}
	my-selector{
		position: relative;
		margin-left: 5%;
	}
</style>